<template>
  <div>
    <section class="app-sidebar">
      <ul class="menu-list">
        <li>
          <a>频道分组</a>
          <expanding>
            <ul>
              <li v-for="(item, index) in programList" v-if="item.program">
                <div class="dragitem" draggable="true" @dragstart="drag">
                  {{ item.program }}
                </div>
              </li>
            </ul>
          </expanding>
        </li>
      </ul>
    </section>
    <section class="main">
      <article class="tile is-child">
        <div class="control is-grouped">
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            style="width: 100%;"
            editable
            @tab-add="tabAdd"
            @tab-remove="tabRemove"
            @tab-click="tabClick"
          >
            <el-tab-pane
              ref="pane"
              v-if="editableTabs.length > 0"
              v-for="(item, index) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <div v-for="scr in screenInfos">
                <grid
                  v-if="scr !== null && scr.screen === item.title"
                  v-for="grid in scr.grid"
                  :key="grid.program"
                  :grid="grid">
                </grid>
              </div>
              <div v-for="(layout, layIndex) in layouts" v-if="layouts.length > 0">
                <newgrid
                  v-if="layout !== null && layout.index.toString() === item.name"
                  v-for="(grid, gridIndex) in layout.grid"
                  :key="index"
                  :grid="grid"
                  :dom="dom"
                  :layIndex="layIndex"
                  :gridIndex="gridIndex"
                >
                </newgrid>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <layout :visible="visible" :index="tabIndex" @initLayout="initLayout" @close="close"></layout>
        <del-modal :visible="delVisible" @close="closeDelModal" @del="deleteScreen"></del-modal>
      </article>
    </section>
  </div>
</template>
<script>
  import Expanding from 'vue-bulma-expanding'
  import {Tabs, TabPane} from 'vue-bulma-tabs'
  import {mapGetters, mapActions} from 'vuex'
  import {Tabs as ElTabs, TabPane as ElTabPane} from 'element-ui'
  import Grid from './grid.vue'
  import Newgrid from './newgrid.vue'
  import Layout from './layout'
  import 'element-ui/lib/theme-default/index.css'
  import DelModal from '../common/DelModal.vue'

  export default {
    components: {
      Expanding,
      Tabs,
      TabPane,
      ElTabs,
      ElTabPane,
      Grid,
      Newgrid,
      Layout,
      DelModal
    },

    data () {
      return {
        dom: null,
        editableTabsValue: '0',
        tabIndex: 0,
        editableTabs: [],
        visible: false,
        delVisible: false,
        screenInfos: []
      }
    },

    methods: {
      ...mapActions([
        'getScreenInfo',
        'saveLayouts',
        'addScreen'
      ]),
      drag: function (event) {
        this.dom = event.currentTarget
      },
      tabClick () {
        // console.log(this.layouts)
      },
      // 点击下发屏幕按钮事件
      iclick () {
        this.addScreen()
      },
      tabAdd () {
        this.visible = true
      },
      tabRemove (targetName) {
        let tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }
        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      },
      close () {
        this.visible = false
      },
      closeDelModal () {
        this.delVisible = false
      },
      /*
      saveScreen (sname) {
        var screenInfo = {
          screen: sname,
          line: 100,
          row: 100,
          grid: this.newGrids
        }
        this.$store.dispatch('addScreen', screenInfo)
      },
      */
      deleteScreen () {
        this.$store.dispatch('delScreen')
      },
      initLayout (layout) {
        let newTabName = ++this.tabIndex + ''
        let sname = layout.screen + ''
        this.editableTabs.push({
          title: sname,
          name: newTabName,
          content: ''
        })
        this.editableTabsValue = newTabName
        this.saveLayouts(layout)
      }
      /*
      haveNewGrids () {
        if (this.newGrids && this.newGrids.length > 0) {
          return true
        } else {
          return false
        }
      }
      */
    },
    watch: {
      screenList (list) {
        this.tabIndex = list.length
        var that = this
        if (list !== null && list.length > 0) {
          that.editableTabsValue = 1 + ''
          list.map(function (element, index) {
            that.getScreenInfo(list[index])
            that.editableTabs.push({
              title: element,
              name: (index + 1) + ''
            })
          })
        }
      },
      screenInfo (info) {
        this.screenInfos.push(info)
      }
    },
    computed: {
      ...mapGetters([
        'programList',
        'screenList',
        'screenInfo',
        'layouts'
      ]),
      sid () {
        return this.editableTabsValue
      }
    },

    created () {
      this.$store.dispatch('getProgramList')
      this.$store.dispatch('getScreenList')
    },

    mounted () {
      var header = document.getElementsByClassName('el-tabs__header')
      var span = document.createElement('span')
      span.setAttribute('class', 'el-tabs__save-tab')
      var i = document.createElement('i')
      i.setAttribute('class', 'el-icon-down')
      var that = this
      i.onclick = function (e) {
        that.addScreen()
      }
      span.appendChild(i)
      header[0].appendChild(span)
    },
    beforeDestroy () {
      this.$store.commit('clearGrids')
    }
  }
</script>

<style lang="scss">

  .tile.is-child {
    padding: 1.25rem;
  }

  .dragitem {
    cursor: move;
    margin: 10px;
  }

  .proxy {
    border: 1px solid #ccc;
    width: 80px;
    background: #fafafa;
  }

  .app-sidebar {
    position: fixed;
    top: 49px;
    left: 0;
    bottom: 0;
    padding: 20px 0 50px;
    width: 180px;
    min-width: 45px;
    max-height: 100vh;
    height: calc(100% - 49px);
    z-index: 1024 -1;
    background: #FFF;
    box-shadow: 0 2px 3px rgba(17, 17, 17, 0.1), 0 0 0 1px rgba(17, 17, 17, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .main {
    position: fixed;
    bottom: 0;
    width: calc(100% - 180px);
    padding-top: 49px;
    margin-left: 180px;
    transform: translate3d(0, 0, 0);
    max-height: 100vh;
    height: calc(100%);
    z-index: 1024 -1;
    background: #FFF;
    box-shadow: 0 2px 3px rgba(17, 17, 17, 0.1), 0 0 0 1px rgba(17, 17, 17, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .modal {
    z-index: 1055 !important;
  }
  .el-tabs__save-tab {
    float: right;
    border: 1px solid #d3dce6;
    height: 18px;
    width: 18px;
    line-height: 18px;
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    color: #d3dce6;
    cursor: pointer;
    transition: all .15s;
  }
  .el-tabs__save-tab:hover {
    cursor: pointer;
    color: #00d1b2;
    font-weight: bolder;
  }
  .el-tabs__new-tab {
    margin: 0 0 9px 22px !important;
  }
  .el-icon-down:before {
    content: "\2193";
  }
  .el-tabs__nav-wrap {
    margin-right: 66px;
  }

</style>
